<div uib-dropdown is-open="DeviceList.isOpen" on-toggle="DeviceList.toggled(open)" auto-close="{{ DeviceList.allowMultiple ? 'outsideClick' : 'always' }}">
	<button class="btn btn-default uib-dropdown-toggle" type="button" uib-dropdown-toggle>
					<div class="caption">
						<em ng-if="DeviceList.isLoading" translate>Loading…</em>
						<span ng-if="!DeviceList.isLoading" ng-repeat="dev in DeviceList.devices | filter : DeviceList.isChecked as selected">
							<span title="dev.name()"><img ng-src="{{dev.icon()}}">{{dev.name()}}</span>
							<span ng-if="!$last" class="sep">|</span>
						</span>
		 				<em ng-if="!DeviceList.isLoading && !selected.length">unspecified</em>
	 					<span class="caret"></span>
					</div>
				</button>
	<ul class="dropdown-menu">
		<li ng-repeat="dev in DeviceList.devices" value="{{dev.name()}}" ng-class="{selected: DeviceList.checked[dev.name()]}">
			<a href="#" ng-click="DeviceList.select(dev.name()); $event.preventDefault()"><img ng-src="{{dev.icon()}}"> {{dev.name()}}</a>
		</li>
		<li ng-if="!DeviceList.allowMultiple" ng-class="{selected: DeviceList.isUnspecified()}" value="">
			<a href="#" ng-click="DeviceList.select(''); $event.preventDefault()"><em>unspecified</em></a>
		</li>
		<li class="divider"></li>
		<li>
			<form class="form-inline">
				<input class="form-control input-sm" type="text" placeholder="{{'Custom device …' | translate}}"
							ng-click="$event.stopPropagation()"
							ng-keydown="DeviceList.keydown($event)"
							ng-blur="DeviceList.blur($event)">
			</form>
		</li>
	</ul>
</div>
